<template>
  <div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>
                <i class="el-icon-user"></i> 账户管理
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="container">
        <div class="handle-box">
            <el-button
                type="primary"
                icon="el-icon-circle-plus"
                class="handle-del mr10"
                @click="addVisible = true"
            >新增账户</el-button>
            <el-select v-model="id" placeholder="请选择小区" @change="changeHouse" style="display:block;width:150px;margin-top:20px;">
                <el-option
                v-for="item in houses"
                :key="item.communityId"
                :label="item.communityName"
                :value="item.communityId">
                </el-option>
            </el-select>
            <el-table
            :data="accounts"
            border
            style="width:auto;margin-top:28px;">
                <el-table-column
                prop="userId"
                label="账户ID"
                width="180">
                </el-table-column>
                <el-table-column
                prop="userAccount"
                label="账户名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="userPassword"
                label="账户密码"
                width="180">
                </el-table-column>
                <el-table-column
                prop="userName"
                label="用户名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="userMoney"
                label="余额"
                width="180">
                </el-table-column>
                <el-table-column
                prop="userPhone"
                label="手机"
                width="180">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="showUpdate(scope.$index, scope.row)"
                        >更新</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="del(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!-- 添加弹出框 -->
    <el-dialog title="添加" :visible.sync="addVisible" width="50%">
        <el-form ref="addform" :rules="rules" :model="addForm" label-width="100px">
            <el-form-item label="账户名字">
                <el-input v-model="addForm.userAccount"></el-input>
            </el-form-item>
            <el-form-item label="账户密码">
                <el-input v-model="addForm.userPassword"></el-input>
            </el-form-item>
            <el-form-item label="用户名" >
                <el-input v-model="addForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="小区">
                <el-select v-model="addForm.userCommunityId">
                    <el-option
                    v-for="item in houses"
                    :key="item.communityId"
                    :label="item.communityName"
                    :value="item.communityId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="userPhone">
                <el-input v-model="addForm.userPhone"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">添 加</el-button>
        </span>
    </el-dialog>

    <!-- 更新弹出框 -->
    <el-dialog title="更新" :visible.sync="updateVisible" width="30%">
        <el-form ref="updateform" :rules="rules" :model="updateForm" label-width="70px">
            <el-form-item label="账户名">
                <el-input v-model="updateForm.userAccount"></el-input>
            </el-form-item>
            <el-form-item label="账户密码">
                <el-input v-model="updateForm.userPassword"></el-input>
            </el-form-item>
            <el-form-item label="用户名" >
                <el-input v-model="updateForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="小区">
                <el-select v-model="updateForm.userCommunityId">
                    <el-option
                    v-for="item in houses"
                    :key="item.communityId"
                    :label="item.communityName"
                    :value="item.communityId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="userPhone">
                <el-input v-model="updateForm.userPhone"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">更 新</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
import {getAccounts,getHouses,delAccount,updateAccount,addAccount} from '@/api'

export default {
    data(){
        return {
            accounts: [],
            houses: [],
            id: '',
            addVisible: false,
            addForm: {storeLongitude: '', storeLatitude: ''},
            updateForm: {storeLongitude: '',storeLatitude: ''},
            updateVisible: false,
            rules: {
                userPhone: [ 
                    { required: true, message: "请输入手机号码", trigger: "blur" },
                    { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
                    {
                        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                        message: "请输入正确的手机号码"
                    }
                ]
            }
        }
    },
    methods:{
        changeHouse(){
            this.getAccounts()
        },
        getAccounts(){
            getAccounts(this.id).then(res => {
                this.accounts = res.data
            })
        },
        getHouses(){
            getHouses().then(res => {
                this.houses = res.data
            })
        },
        showUpdate (index, row) {
            this.idx = index
            this.updateForm = row
            this.updateVisible = true
        },
        add(){
            this.$refs['addform'].validate((valid) => {    // 为表单绑定验证功能
                if (valid) {
                    let fromData = new FormData()
                    fromData.append('userAccount', this.addForm.userAccount)
                    fromData.append('userPassword', this.addForm.userPassword)
                    fromData.append('userName', this.addForm.userName)
                    fromData.append('userPhone', this.addForm.userPhone)
                    fromData.append('userCommunityId', this.addForm.userCommunityId)
                    addAccount(fromData).then(res => {
                        if (res.code === 0) {
                            this.addVisible = false
                            this.$message({
                                type: 'success',
                                message: '添加成功'
                            })
                            this.getAccounts()
                        } else {
                            this.$message({
                                type: 'error',
                                message: '添加失败'
                            })
                        }
                    })
                }else{
                    this.$message.error('请输入正确的手机号')
                    return false;
                }
            })
        },
        update(){
            this.$refs['updateform'].validate((valid) => {    // 为表单绑定验证功能
                if (valid) {
                    let fromData = new FormData()
                    fromData.append('userId', this.accounts[this.idx].userId)
                    fromData.append('userAccount', this.updateForm.userAccount)
                    fromData.append('userPassword', this.updateForm.userPassword)
                    fromData.append('userName', this.updateForm.userName)
                    fromData.append('userPhone', this.updateForm.userPhone)
                    fromData.append('userCommunityId', this.updateForm.userCommunityId)
                    updateAccount(fromData).then(res => {
                        if (res.code === 0) {
                            this.updateVisible = false
                            this.$message({
                                type: 'success',
                                message: '更新成功'
                            })
                            this.getAccounts()
                        } else {
                            this.$message({
                                type: 'error',
                                message: '更新失败'
                            })
                        }
                    })
                }else{
                    this.$message.error('请输入正确的手机号')
                    return false;
                }
            })
        },
        del(index,row){
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                let fromData = new FormData()
                fromData.append('id', this.accounts[index].userId)
                delAccount(fromData).then(res => {
                    if (res.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        this.accounts.splice(index, 1)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        })
                    }
                })
                
            })
            .catch(() => {});
        }
    },
    mounted(){
        this.getHouses()
    }
}
</script>

<style>
.red{
    color: red;
}
.map {
  width: 100%;
  height: 300px;
}
</style>